<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas</title>
	</head>
	<body>
		<!-- 创建画布 -->
		<canvas id="mc" width="300" height="200" style="border:1px solid #c3c3c3"></canvas>

		<script>
			//JS在画布上渲染
			//绘制矩形填充区域
			const ctx = document.getElementById("mc").getContext("2d");
			/*ctx.fillStyle="#FF0000";
			ctx.fillRect(0,0,150,100); */
			
			//从起始点到终点绘制一根线
			ctx.moveTo(0,0);
			ctx.lineTo(300,200);
			ctx.moveTo(0,0);
			ctx.lineTo(150,200);
			ctx.moveTo(0,0);
			ctx.lineTo(300,100);
			ctx.stroke();
			
			//绘制圆形
			/* ctx.beginPath();
			ctx.arc(95,50,40,0,2*Math.PI);
			ctx.stroke(); */
			
			//绘制文字
			ctx.font="60px 微软雅黑";
			ctx.fillText("V3PNC",40,120);
		</script>
	</body>
</html>
